<template>
  <view class="page-container">
    <u-navbar :is-back="false" title="我的" title-color="#FFF" :background="{background: '#00a0e9'}"></u-navbar>
    <view class="content">

      <view class="card">
        <view class="left">用户名</view>
        <view class="right">{{ userInfo.userModel.userName }}</view>
      </view>

<!--
      <view class="card" @click="routeTo({link:'changePassword'})">
        <view class="left">修改密码</view>
        <view class="right">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
-->

      <view class="card">
        <view class="left">解除绑定</view>
        <view class="right">
          <u-switch v-model="bind" inactive-color="#181818" active-color="#FFF"></u-switch>
        </view>
      </view>
    </view>

    <tabbar></tabbar>
  </view>
</template>

<script>

import tabbar from '../../components/tabbar.vue'
import USwitch from "../../uview-ui/components/u-switch/u-switch";
import UIcon from "../../uview-ui/components/u-icon/u-icon";
import UNavbar from "../../uview-ui/components/u-navbar/u-navbar";
export default {
  components: {
    UNavbar,
    UIcon,
    USwitch,
    tabbar
  },
  data() {
    return {
      bind: false
    };
  },
  computed:{
    userInfo(){
      return this.$store.state.userInfo
    },
  },
  watch: {
    async bind() {
      if (this.bind) {
        const { confirm } = await wx.showModal({
          title: '提示',
          content: '确认进行解绑吗?',
        })
        if (confirm) {
          this.$store.dispatch('logout')
        } else {
          this.bind = false
        }
      }
    }
  }
}
</script>

<style lang="less">
.page-container {
  background: #f0f0f0;

  .content {
    .card {
      height: 90rpx;
      background: #FFF;
      padding: 20rpx;
      margin: 20rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
